Este recurso é a chave para fazer sites responsivos, ou seja, que adequam o layout da página de acordo com o tamanho da tela do browser.
Por exemplo, se estou exibindo a página num micro posso querer uma fonte de letra grande mas numa tela de celular devo escolher uma fonte menor.
Explicando mais corretamente podemos dimensionar os elementos da página de acordo com a dimensão da janela do Browser, ou seja, ao diminuir a tela podemos diminuir a fonte das letras de uma div, de uma imagem, etc. e fazer o contrário quando a janela for expandida. Com certeza é mais um trabalho para o desenvolvedor mas muitas vezes o efeito é fundamental.
Através do JQuery ( embutido no bootstrap) é possível verificar qual a dimensão da janela do browser e aplicar estilos de acordo com um limite mínimo, ou seja, se estiver abaixo do limite aplica tal estilo e se estiver acima podemos definir outro estilo.
Importante :
1 - O bootstrap utiliza a metodologia Mobile-First, ou seja, sempre dá prioridade a formatação em
dispositivos móveis e isto facilita muito a construção de sites responsivos. Normalmente um estilo aplicado
será visivel tanto numa tela grande como numa tela pequena, se fica bom é outra questão.
2-Normalmente a gente define um estilo para o item e no media-querie a gente muda esse estilo para uma ocasião especial onde a tela é diferente. Mas isto não é regra mas sim uma simplificação.
Por esse motivo ao simplesmente aplicar o bootstrap numa página ele fica com um formato muito diferente, pronto para o celular praticamente.
2 - A css tem papel fundamental neste design. Todos os media queries estão na css.
Não existe uma regra específica que limitam a utilização do recurso dentro do bootstrap mas existem padrões de largura de tela para celulares, tablets e computadores e por esse motivo é bom testar em todos formatos que você deseja que sua página web tenha boa exibição.
| Resolução (pixels) | Aparelho |
|---|---|
| 320 | Smartphones no modo retrato |
| 480 | Smartphones no modo paisagem |
| 600 | Tablets pequenos. Ex.: Amazon Kindle (600px x 800px) |
| 768 | Tablets maiores no modo retrato. Ex.: IPad (768px x 1024px) |
| 1024 | Tablets maiores no moto paisagem e monitores mais antigos |
| 1200 | Monitores tipo wide |
Hoje temos monitore extra-wide. O que estou usando para editar nem é extra-wide mas já possui resolução 1920 por 1080 pixels.
Os monitores extra-wide tem ganhado popularidade por substituirem a necessidade de 2 monitores. Hoje temos monitores extra-wide com telas curvas e só deus sabe onde isso vai parar ( acho só quando tiverem 360 graus de cobertura). Portanto as definições aqui apresentadas são mais um modelo que uma realidade.
Podemos definir em que 'dimensão' de tela o estilo será aplicado. Podemos definir quando a tela for :
1 - Maior que @media (min-width:x) ou quando a tela for
2 - Menor que (@media (max-width:y) ou
3 - Combinar os 2 colocando um and nas declaracoes (min-width:x) and (max-width:y).
Para testar altere a largura da janela de exibição do browser e veja como os elementos se comportam.
// Dispositivos Pequenos (celulares modo paisagem, 576px ou mais)
@media (min-width: 576px) { ... } // o que esta entre {} será usado se a tela tiver mais que 576 px
// Dispositivos Médios (tablets, 768px ou mais)
@media (min-width: 768px) { ... } // o que esta entre {} será usado se a tela tiver mais que 768 px
// Dispositivos Grandes (desktops (4:3), 992px ou mais)
@media (min-width: 992px) { ... }// o que esta entre {} será usado se a tela tiver mais que 992 px
// Dispositivos Extra Largos (desktops wide-screen(16:9), 1200px ou mais)
@media (min-width: 1200px) { ... } // o que esta entre {} será usado se a tela tiver mais que 1200 px
Importante :
1-A altura da tela não é considerada porque o browser, por default, detemina se haverá
ou não o scroll vertical dependendo do conteúdo da página.
Veja : Documentação
2-Não há limites para o número de media queries que pode ser colocado numa página. Você pode definir quantos e quais critérios deseja utilizar. O segredo é fazer a combinação deles para que um não atrapalhe o outro e para que a página fique com uma boa apresentação.
Da mesma maneira que definimos a largura mínima para que um estilo seja aplicado podemos definir a largura máxima.
// Dispositivos Extra Largos (desktops wide-screen(16:9), 1200px ou mais)
@media (max-width: 1200px) { ... } // o que esta entre {} será usado se a tela tiver menos que 1200 px
O bootstrap define uma sigla para cada largura da tela :
| Sigla | Utilização (menor ou igual a xxx pixels) |
|---|---|
| sm | 576 |
| md | 768 |
| lg | 992 |
| xl | 1200 |
1-Note que o media-querie é ativado quando entramos no modo a que ele define a formatação:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- tag meta para site responsivo-->
Portanto ao exibir um documento ele primeiramente aplica o formato para aquele elemento padrão na montagem da página.
2-Ao redimensionarmos a tela, por exemplo, ao aumentarmos a tela de 100 a 319 pixels nada acontece mas ao atingir a largura de 320 px um novo estilo é aplicado.
Portanto, o correto seria afirmar que existe um range para aplicação do media-querie.
3-Se existe uma definição para aquele formato, ele aplica, senão permanece o anteriormente aplicado.
Portanto, definimos um range de atuação para o media querie.
Veja um exemplo:
@media (min-width: 992px) and (max-width: 1199.98px) {
h1 {
font-size: 5em;
}
}
Portanto, quando a tela tiver de 992px até 1200px a fonte dos h1 do documento será aumentada para 5em.
Resolvi fazer um exemplo no parágrafo abaixo. A cor das letras vai mudar de cor de acordo com a largura da página. Poderia ser qualquer propriedade definida pela CSS.
Reduza a largura da tela para visualizar os efeitos.
<h6 style="background-color:pink;">Este h6 está sujeito ao controle do media querie desta página</h6>
<style>
@media (min-width: 576px) {
h6{color:orange}
}
@media (min-width: 768px) {
h6{color: blue}
}
@media (min-width: 992px) {
h6{color: green}
}
@media (min-width: 1200px) {
h6{color: black}
}
</style>
O efeito é o seguinte : Maior que 576px : Laranja
Maior que 768px: Azul
Maior que 992px : Green
Maior que 1200px : Preto.
No exemplo abaixo eu apliquei uma cor num box específico de acordo com a largura da tela...ficou muito bom.
Exemplo Media Queries.html